<template>
  <svg :class="svgProps.customClass" :style="`width: ${svgProps.width};height: ${svgProps.width || svgProps.height}`" aria-hidden="true">
    <use :xlink:href="svgProps.name"></use>
  </svg>
</template>
<script setup>
import { watch, reactive } from "vue"
const props = defineProps({
  name: { type: String },
  customClass: { type: String },
  width: {
    type: [String, Number],
    default: "3rem",
  },
  height: {
    type: [String, Number],
    default: "3rem",
  },
})

const svgProps = reactive({
  width: "",
  height: "",
  customClass: "",
  name: "",
})

watch(
  () => props,
  newV => {
    // 判断给单位没有
    svgProps.width = /^[\d|.]*$/g.test(props.width) ? props.width + "rem" : props.width
    svgProps.height = /^[\d|.]*$/g.test(props.height) ? props.height + "rem" : props.height
    svgProps.name = props.name ? `#icon-${props.name}` : "#icon"
    svgProps.customClass = props.customClass ? "svg-icon " + props.customClass : "svg-icon"
  },
  {
    immediate: true,
    deep: true,
  }
)
</script>
<style scoped>
.svg-icon {
  vertical-align: -0.15rem;
  fill: currentColor;
  overflow: hidden;
}
</style>
